<template>
  <div>
    <div class="boxx" v-if="shops">
      <div class="card" v-for="item in shops" @click="$router.push(`/pd/${item.lid}`)" :key="item.lid">
        <div class="tit">{{item.names}}</div>
        <van-card
          :tag="item.tag"
          :price="item.price"
          :desc="item.details"
          :title="item.subtit"
          :thumb="shopURL+item.pic"
          origin-price="10.00"
          lazy-load
        />
        <div class="btn">
          <button @click="$router.push(`/pd/${item.lid}`)">选规格</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
...mapState(['shops','shopURL']),
  
  },
  watch: {
    shops(newValue, oldValue) {
       console.log('shops',newValue)
    }
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 70vw;
  position: relative;
  overflow: hidden;
  // 主标题
  .tit {
    position: absolute;
    left: 30vw;
    top: 2vw;
    z-index: 2;
    color: #242524;
  }
  // 卡片第一个标题
  .van-card__title {
    margin-top: 5vw;
    color: #a0a4a7;
  }
  // 卡片对商品描述
  .van-card__desc {
    color: #a0a4a7;
  }
  // 按钮
  .btn {
    position: absolute;
    bottom: 2vw;
    right: 0;
    button {
      border: 0;
      background-color: #a7d500;
      padding: 2vw;
      border-radius: 10vw;
      color: #fff;
      font-size: 3vw;
    }
  }
}
</style>